<template>
    <div>
        <div align="left" style="height: 35px">
            课程列表
        </div>
        <div class="shaixuankc">
            <span> 筛选查询 </span>
            <button @click="gjjiansuo" class="rightbut">  高级检索  </button>
        </div>
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="输入搜索：">
                <el-input v-model="jsCourse.courseName" placeholder="课程名称" style="width: 180px"></el-input>
            </el-form-item>
            <el-form-item label="课程分类：">
                <el-select v-model="jsCourse.classId" placeholder="请选择课程分类" style="width: 180px">
                    <el-option label="" value=""></el-option>
                    <el-option label="java" value="6"></el-option>
                    <el-option label="css" value="9"></el-option>
                    <el-option label="spring" value="7"></el-option>
                    <el-option label="view" value="5"></el-option>
                    <el-option label="script" value="10"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="上传人员：">
                <el-select v-model="jsCourse.createId" style="width: 180px">
                    <el-option label="" value=""></el-option>
                    <el-option label="admin" value="1001"></el-option>
                    <el-option label="me" value="1002"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="课程标签：">
                <el-select v-model="jsCourse.coursePrimary" placeholder="请选择标签" style="width: 180px">
                    <el-option label="" value=""></el-option>
                    <el-option label="java" value="java"></el-option>
                    <el-option label="css" value="css"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmitJS">查询</el-button>
            </el-form-item>
        </el-form>
<!--        数据表-->
        <el-table
                :data="jsCourselist.slice((currentPage-1)*PageSize,currentPage*PageSize)"
                style="width: 100%"
                align="center"
                border>
            <el-table-column type="selection" width="50"/>
            <el-table-column prop="courseId" label="编号" width="70" align="center"/>
            <el-table-column align="center" prop="url" label="课程图片" width="150">
                <template slot-scope="scope">
                    <img :src="scope.row.url" style="height: 50px"/>
                </template>
            </el-table-column>
            <el-table-column prop="courseName" label="课程名称" width="130" align="center" />
            <el-table-column prop="courseNprice" label="价格 / 元" width="120" align="center"/>
            <el-table-column prop="createId" label="上传人员" width="120" align="center"/>
            <el-table-column prop="name" label="分类" width="120" align="center"/>
            <el-table-column prop="coursePrimary" label="标签" width="120" align="center"/>
            <el-table-column prop="saleNum" label="销量" width="120" align="center"/>
            <el-table-column prop="courseCstatus" label="审核状态" width="130" :formatter="formatCourseCstatus" align="center"/>
            <el-table-column label="操作" width="150" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button @click="chakan(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="bianji(scope.row)" type="text" size="small">编辑</el-button><br/>
                    <el-button @click="rizhi(scope.row)" type="text" size="small">日志</el-button>
                    <el-button @click="shanchu(scope.$index, scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
<!--    分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="PageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total=totalCount>
        </el-pagination>
<!--    删除提示框-->
        <el-dialog title="提示" :visible.sync=delVisible width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow" >确 定</el-button>
            </span>
        </el-dialog>
        <!--        查看课程信息-->
        <transition name="el-fade-in-linear">
            <div class="View_details" v-if="Viewdetailshow">
                <div class="View_details_top"><span>课程详情</span><span class="back" @click="Viewdetailshow = false">×</span></div>
                <el-form v-model="jsCourse" :key="jsCourse.courseId" :inline="true" class="demo-form-inline" align="left">
                    <el-form-item size="mini" class="View_details_content" label="课程编号：">
                        <el-input v-text="jsCourse.courseId"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="课程名称：">
                        <el-input v-text="jsCourse.courseName"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="课程价格：">
                        <el-input v-text="jsCourse.courseNprice"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="上传人员：">
                        <el-input v-text="jsCourse.trueName"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="课程分类：">
                        <el-input v-text="jsCourse.name"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content2" label="课程销量：">
                        <el-input v-text="jsCourse.saleNum"></el-input>
                    </el-form-item>
                    <div class="look">
                        <el-form-item  class="View_details_content" label="课程标签：">
                            <el-input v-text="jsCourse.searchKeywords" type="textarea"></el-input>
                        </el-form-item>
                    </div>
                    <div class="View_details_content_commodity">
                        <el-form-item  class="View_details_content1" label="课程介绍：">
                            <el-input v-text="jsCourse.courseIntro" type="textarea"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </transition>
        <!--        修改课程信息-->
        <transition name="el-fade-in-linear">
            <div class="upDate_View_details" v-if="UpdateViewdetailshow" align="left">
                <div class="View_details_top"><span>修改商品信息</span><span class="back" @click="UpdateViewdetailshow = false">×</span></div>
                <el-form v-model="jsCourse" :key="jsCourse.productId" :inline="true" class="demo-form-inline">
                    <el-form-item size="mini" class="View_details_content" label="课程编号：">
                        <el-input v-model="jsCourse.courseId"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="课程名称：">
                        <el-input v-model="jsCourse.courseName"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="课程价格：">
                        <el-input v-model="jsCourse.courseNprice"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="上传人员：">
                        <el-input v-model="jsCourse.trueName"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="课程分类：">
                        <el-input v-model="jsCourse.name"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content2" label="课程销量：">
                        <el-input v-model="jsCourse.saleNum"></el-input>
                    </el-form-item>
                    <div class="look">
                        <el-form-item  class="View_details_content" label="课程标签：">
                            <el-input v-model="jsCourse.searchKeywords" type="textarea"></el-input>
                        </el-form-item>
                    </div>
                    <div class="View_details_content_commodity">
                        <el-form-item  class="View_details_content1" label="课程介绍：">
                            <el-input v-model="jsCourse.courseIntro" type="textarea"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
                <div class="View_details_bottom">
                    <div class="View_details_bottom_position">
                        <button @click="UpdateViewdetailshow = false" class="View_details_bottom_no">取消</button>
                        <button @click="confirmModification" class="View_details_bottom_yes">确定</button>
                    </div>
                </div>
            </div>
        </transition>
<!--    高级检索-->
        <el-dialog title="高级检索" :visible.sync="dialogFormVisible">
            <el-descriptions :column="2" direction="vertical">
                <el-descriptions-item label="课程分类">
                    <el-select v-model="jsCourse.classId" placeholder="请选择课程分类">
                        <el-option label="" value=""></el-option>
                        <el-option label="java" value="6"></el-option>
                        <el-option label="spring" value="7"></el-option>
                        <el-option label="springboot" value="8"></el-option>
                        <el-option label="view" value="5"></el-option>
                        <el-option label="css" value="9"></el-option>
                        <el-option label="script" value="10"></el-option>
                    </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="课程名称">
                    <el-input v-model="jsCourse.courseName" style="width: 62%"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="课程分类">
                    <el-select v-model="jsCourse.createId" placeholder="请选择分类" >
                        <el-option label="" value=""></el-option>
                        <el-option label="前端" value="1"></el-option>
                        <el-option label="后端" value="2"></el-option>
                    </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="上传人员">
                    <el-select v-model="jsCourse.createId" >
                        <el-option label="" value=""></el-option>
                        <el-option label="admin" value="1"></el-option>
                        <el-option label="me" value="2"></el-option>
                    </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="审核状态">
                    <el-select v-model="jsCourse.courseStatus">
                        <el-option label="" value=""></el-option>
                        <el-option label="未审核" value="3"></el-option>
                        <el-option label="审核中" value="4"></el-option>
                        <el-option label="审核失败" value="5"></el-option>
                        <el-option label="已审核" value="6"></el-option>
                    </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="课程标签">
                    <el-select v-model="jsCourse.coursePrimary" placeholder="请选择标签" >
                        <el-option label="" value=""></el-option>
                        <el-option label="java" value="java"></el-option>
                        <el-option label="css" value="css"></el-option>
                    </el-select>
                </el-descriptions-item>
            </el-descriptions>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取  消</el-button>
                <el-button type="primary" @click="onSubmitJS()">开始检索</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                jsCourse:{
                    courseId:"",
                    courseName:"",
                    classId:"",
                    createId:"",
                    courseStatus:"",
                    coursePrimary:"",
                },
                //检索弹出框
                dialogFormVisible:false,
                //查询到的数据
                jsCourselist:[],
                // 默认显示第一条
                currentPage:1,
                // 总条数，根据接口获取数据长度(注意：这里不能为空)
                totalCount:1,
                // 个数选择器（可修改）
                pageSizes:[1,10,50,100],
                // 默认每页显示的条数（可修改）
                PageSize:10,
                //删除提示弹框的状态
                delVisible : false,
                //查看课程信息
                Viewdetailshow: false,
                //修改课程信息
                UpdateViewdetailshow: false,
            };
        },
        methods:{
            // 分页
            // 每页显示的条数
            handleSizeChange(val) {
                // 改变每页显示的条数
                this.PageSize=val;
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage=1
            },
            // 显示第几页
            handleCurrentChange(val) {
                // 改变默认的页数
                this.currentPage=val
            },
            rizhi(row){
                //跳转至日志页面
                this.$router.push("/class/logs");
                sessionStorage.setItem("courseId",row.courseId);
            },
            //检索查询数据
            async onSubmitJS(){
                //检索时，先回到第一页，否则找不到
                this.currentPage=1;
                const {data: res} = await this.$http.post("/course/getCourseJS",this.jsCourse);
                this.jsCourselist = res.data;
                this.totalCount=res.data.length;
                //返回数据后，关闭检索弹窗
                this.dialogFormVisible = false;
            },
            //查询数据
            async onSubmit(){
                const {data: res} = await this.$http.post("/course/getCourse");
                this.jsCourselist = res.data;
                this.totalCount=res.data.length;
            },
            // 确定删除按钮
            deleteRow() {
                this.$http.get("/course/deleteCourse",
                    {params:{courseId: this.jsCourse.courseId}}
                    ).then(res => {
                        if (res.data.code === 200) {
                            this.$message.success('删除成功');
                            this.onSubmit();
                        }
                    }).catch(error => {
                        this.$message.error('删除失败')
                    })
                this.delVisible = false;//关闭删除提示模态框
            },
            //审核内容格式化
            formatCourseCstatus(row){
                if(row.courseCstatus == '3'){
                    return '未审核'
                } else if (row.courseCstatus == '4'){
                    return '审核中'
                } else if (row.courseCstatus == '5'){
                    return '审核失败'
                } else if (row.courseCstatus == '6'){
                    return '其他'
                }else {
                    return ''
                }
            },
            //查看按钮
            chakan(data){
                this.jsCourse = data;
                this.Viewdetailshow = true;
            },
            //编辑按钮
            bianji(data){
                this.jsCourse = data;
                this.UpdateViewdetailshow = true;
            },
            //删除按钮
            shanchu(index, row) {
                this.jsCourse.courseId = row.courseId;
                this.delVisible = true;
            },
            //高级检索按钮
            gjjiansuo(){
                this.dialogFormVisible = true;
            },
        },
        //加载数据
        mounted() {
            this.onSubmit();
        }
    }
</script>

<style scoped>
    a{
        text-decoration: none;
        color: #4e8fff;
    }
    .shaixuankc{
        height: 40px;
        text-align: left;
        padding-top: 10px;
        background-color: rgba(243, 243, 243, 0.65);
    }
    .shaixuankc .rightbut{
        float: right;
        margin: 0 15px;
        padding: 5px 10px;
        background-color: white;
        font-size: 10px;
        border: 1px #D8D8D8 solid;
    }
    .back{
        cursor: pointer;
        margin: 0px 17px 0px 0px;
        float: right;
        font-size: 34px;
    }

    /*    查看课程详情*/
    .View_details{
        background: #FFFFFF;
        width: 700px;
        z-index: 5;
        top: 257px;
        left: 500px;
        height: 400px;
        position: absolute;
        box-shadow: 0px 4px 26px -8px;
    }
    .View_details_top{
        background-color: #F2F2F2;
        width: 700px;
        height: 50px;
    }
    .View_details_top>span{
        line-height: 50px;
        padding: 0px 0px 0px 25px;
        color: #666666;
        font-weight: 600;
    }
    .View_details_content{
        margin-left: 63px;
        margin-bottom: 48px;
        margin-top: 18px;
    }
    .View_details_content1{
        margin-left: 63px;
        margin-bottom: 20px;
        margin-top: 49px;
    }
    .View_details_content2{
        margin-left: 49px;
        margin-bottom: 48px;
        margin-top: 18px;
    }
    .View_details_content_commodity{
        margin: -44px 0px 0px 0px;
    }
    /*    修改课程信息*/
    .upDate_View_details{
        background: #FFFFFF;
        width: 700px;
        z-index: 5;
        top: 257px;
        left: 500px;
        height: 518px;
        position: absolute;
        box-shadow: 0px 4px 26px -8px;
    }
    .View_details_bottom{
        border-top: 1.5px #E4E4E4 solid;
    }
    .View_details_bottom_position{
        margin: 18px 0px 0px 258px;
    }
    .View_details_bottom_no {
        background: #FFFFFF;
        height: 34px;
        color: #32BC9C;
        width: 78px;
        border: 1px #CCCCCC solid;
        border-radius: 6%;
    }
    .View_details_bottom_yes{
        margin: 0px 0px 0px 20px;
        background: #32BC9C;
        height: 34px;
        color: #FFFFFF;
        width: 78px;
        border: 1px #32BC9C solid;
        border-radius: 6%;
    }
    /*    审核状态*/
    .result_class{
        cursor:pointer;
        color: #13BB9B;
        margin: 0px 4px 0px 4px;
        font-size: 10px;
    }
    .result_show{
        position: relative;
        margin: 118px 230px 0px 593px;
    }
    .result_show_top {
        background-color: #FFFFFF;
        width: 612px;
        height: 373px;
        position: absolute;
    }
    .result_show_top_left{
        background-color: #F2F2F2;
        margin: 0px 0px 0px 0px;
        padding: 18px 471px 14px 25px;
        color: #666666;
        font-weight: 600;
    }
    .result_show_top_tab{
        margin: 55px 0px 0px 26px;
        position: absolute;
    }
    .border_show{
        width: 612px;
        height: 373px;
        box-shadow: 0px 4px 26px -8px;
    }
    .result_show_top_right{
        cursor: pointer;
        line-height: 50px;
        font-size: 27px;
        color: #666666;
        padding: 6px 31px 11px 0px;
        background: #F2F2F2;
        font-weight: 600;
    }
</style>